{% extends "admin/dashboard.html" %}

{% block content %}
    <div class="p-6">
        <h2 class="text-2xl font-bold mb-4">关于我们管理</h2>
        <!-- 添加提示元素 -->
        <div id="save-message" class="hidden mb-4 p-3 rounded-md"></div>
        <form id="about-form" method="post">
            <div class="mb-4">
                <label for="content" class="block text-sm font-medium text-gray-700">内容</label>
                <textarea id="content" name="content" rows="10" class="mt-1 p-2 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">{{ about.content }}</textarea>
            </div>
            <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">保存</button>
        </form>
        <form action="/admin/about/delete" method="post">
            <button type="submit" class="mt-2 px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600">删除</button>
        </form>
    </div>
    <!-- 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#about-form').on('submit', function(e) {
                e.preventDefault(); // 阻止表单默认提交行为
                
                $.ajax({
                    url: '/admin/about',
                    type: 'POST',
                    data: $(this).serialize(),
                    dataType: 'json',
                    success: function(response) {
                        const messageElement = $('#save-message');
                        if (response.success) {
                            messageElement.text(response.message);
                            messageElement.removeClass('hidden bg-red-100 text-red-700');
                            messageElement.addClass('bg-green-100 text-green-700');
                        } else {
                            messageElement.text(response.message || '保存失败');
                            messageElement.removeClass('hidden bg-green-100 text-green-700');
                            messageElement.addClass('bg-red-100 text-red-700');
                        }
                        messageElement.removeClass('hidden');
                        
                        // 3 秒后隐藏提示
                        setTimeout(function() {
                            messageElement.addClass('hidden');
                        }, 3000);
                    },
                    error: function() {
                        const messageElement = $('#save-message');
                        messageElement.text('请求出错，请稍后重试');
                        messageElement.removeClass('hidden bg-green-100 text-green-700');
                        messageElement.addClass('bg-red-100 text-red-700');
                        messageElement.removeClass('hidden');
                        
                        // 3 秒后隐藏提示
                        setTimeout(function() {
                            messageElement.addClass('hidden');
                        }, 3000);
                    }
                });
            });
        });
    </script>
{% endblock %}